import React from 'react';
import MenuConfig from '../../config/menuConfig';
import { Menu } from 'antd';
import { NavLink } from 'react-router-dom'

const { SubMenu } = Menu;
export default class LoginOne extends React.Component{
    componentWillMount() {
       const menuTreeNode = this.renderMenu(MenuConfig); 
       this.setState({
           menuTreeNode
       })
    }
    renderMenu = (data) => {
        return data.map((item) => {
            if(item.children) {
                return (
                    <SubMenu title={item.title} key={item.key}>
                       { this.renderMenu(item.children)}
                     </SubMenu>
                )
            }
            return <Menu.Item title={item.title} key={item.key}>
                        <NavLink to={item.key}>
                            {item.title}
                        </NavLink>
                   </Menu.Item>
        })
    }
    render() {
        return (
            <div>
                <Menu
                    theme="dark"
                    style={{width:300}}
                >
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        )
    }
}